<template>
  <div>
    <div class="top">
      <div class="title">系统消息</div>
      <el-button @click="addMessage">添加</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%" :height="height">
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="content" label="内容" width="400">
          <template slot-scope="scope">
            <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="发送对象">
          <template
            slot-scope="scope"
          >{{scope.row.type == 3 ? '全部' : scope.row.type == 1 ? '用户' : '设计师'}}</template>
        </el-table-column>
        <el-table-column prop="created_at" label="发送时间" />
      </el-table>
      <Pagination class="pagination" :total="total" @nextPage="handleNextPage" />
    </div>
    <Dialog ref="messageDialog" title="系统消息" class="messageDialog" @closeDialog="handleClose">
      <el-form ref="form" :model="form">
        <el-form-item label="标题:">
          <el-input v-model="form.title" size="medium" style="width: 300px" />
        </el-form-item>
        <el-form-item label="对象:">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="内容:">
          <div style="width: 800px;margin-left: 45px">
            <Tinymce v-model="form.detail" />
          </div>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/common/dialog";
import Tinymce from "@/components/Tinymce";
import Pagination from "@/common/pagination";
import Resize from '@/common/mixins/resize'
import { getSysNewsList, addSysNews } from "@/api/http/news";

export default {
  components: {
    Dialog,
    Tinymce,
    Pagination
  },
  mixins: [Resize],
  data() {
    return {
      defaultHeight:280,
      total: 10,
      page: 1,
      form: {},
      options: [
        {
          value: "1",
          label: "用户"
        },
        {
          value: "2",
          label: "设计师"
        },
        {
          value: "3",
          label: "全部"
        }
      ],
      value: "",
      tableData: []
    };
  },
  created() {
    this.getSysNewsList();
  },
  methods: {
    // 添加消息
    handleClose() {
      this.$refs.messageDialog.show();
      if (!this.form.title) {
        this.$message("请填写消息标题");
        return;
      }
      if (!this.value) {
        this.$message("请选择发送对象");
        return;
      }

      if (!this.form.detail) {
        this.$message("请填写消息内容");
        return;
      }
      console.log(this.form, "---form");
      addSysNews({
        title: this.form.title,
        content: this.form.detail,
        type: this.value
      }).then(res => {
        if (re.code == 200) {
          this.$message.success("添加成功");
          this.$refs.messageDialog.cancel();
          this.getSysNewsList();
        }
      });
    },
    handleNextPage(page) {
      this.page = page;
      this.getSysNewsList();
    },
    // 获取系统消息列表
    getSysNewsList() {
      getSysNewsList({ page: this.page }).then(res => {
        // console.log(res,'---res');
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    addMessage() {
      this.$refs.messageDialog.show();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-pagination.scss";
@import "@/styles/el-table.scss";
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    line-height: 40px;
    color: rgba(68, 68, 68, 1);
    font-size: 18px;
    text-align: center;
    font-family: Microsoft Yahei;
    font-weight: bold;
  }
}
.messageDialog /deep/ .el-dialog {
  min-width: 1000px;
}
</style>
